<section id="assgn-create" class="ml-24 mr-24">
    <hl-page-header title="合同流程">
      <hl-button type="primary" @on-click="getflowVersion">发布流程</hl-button>
    </hl-page-header>

    <div class="clearfix ptb-10 line-height-34">
        <div class="pull-left">流程名称</div>
        <div class="pull-left pl-12 js-lcname">
            <div class="select-ul js-flow-select" style="width:110px;">
                <span class="select-name br-4 box-i-shadow" ref="flowname">合同流程</span>
                <ul style="display: none;">
                    <li :data-type="item.code" v-for="item in flow.list" @click="flowTab(item)">{{ item.name }}</li>
                </ul>
            </div>
        </div>
        <div class="pull-left ml-24 js-ml-36">是否默认</div>
        <div class="pull-left pl-12">
            <ul class="cr-type-select clearfix">
                <li :data-type=" item.code " @click="isDefaultEvent(item.code)" :class="{active: item.code == isDefault.active}" v-for="item in isDefault.list">{{ item.name }}</li>
            </ul>
        </div>
        <div class="pull-left ml-24 js-ml-36">状态</div>
        <div class="pull-left pl-12">
            <ul class="cr-type-select js-isQS clearfix">
                <li :data-type=" item.code " @click="status.active = item.code" :class="{active: item.code == status.active}" v-for="item in status.list">{{ item.name }}</li>
            </ul>
        </div>
    </div>

    <div class="clearfix pb-10">
        <div class="pull-left" style="width:56px;">备注</div>
        <div class="pull-left pl-12">
            <textarea class="form-control" style="width:475px;height:100px;" v-model="memo"></textarea>
        </div>
    </div>

    <div class="text-center mt-15" style="margin-left: -24px; margin-right: -24px;">
        <div class="dy-flex border-t border-b line-height-45">
            <div class="dy-fx-1 border-r" :class="{'dy-fx-2': nodeFlag}">审批节点</div>
            <div class="dy-fx-1 border-r" :class="{'dy-fx-3': nodeFlag}">审批人员选择</div>
            <div class="dy-fx-1 border-r" :class="{'dy-fx-2': nodeFlag}" v-if="nodeFlag">适用项目</div>
            <div class="dy-fx-1" :class="{'dy-fx-3': nodeFlag}">流程示意图</div>
        </div>
        <div class="dy-flex">
            <div class="dy-fx-1 border-r" :class="{'dy-fx-2': nodeFlag}" style="height: 600px;overflow:hidden;overflow-y:scroll;">
                <div v-if="showNode[nodeIndex]" style="line-height: 50px;background: rgba(242,242,242,1);border-bottom: 1px solid #fff;">
                    <hl-radio :data="signData" v-model="showNode[nodeIndex].signType" @on-click="handleClick"></hl-radio>
                </div>
                <ul class="assignees-nav">
                    <li v-for="(item, index) in showNode" :class="{'active': index == nodeIndex}" class="relative node-list-wrap" style="text-align:left;">
                        <span v-if=" !item.flag " @click.stop.prevent="nodeTab(index)" class="block" style="text-indent:30px;">{{ item.name }}</span>
                        <input type="text" v-model=" item.name " v-if=" item.flag " style="height:40px;width:100%;border:0;background:none;outline:medium;text-indent:10px;" />
                        <div class="absolute node-list" style="right: 5px;top:0px;color: #5e67a5;" v-if="nodeIndex == index">
                            <span class="icon-Org-account icon-color mr-5" v-if=" !item.flag " @click.stop.prevent="newAddNode(index)"></span>
                            <span class="icon-Gm-delete icon-color mr-5" v-if=" item.type == 'P' && !item.flag " @click.stop.prevent="delNode(index)"></span>
                            <span class="icon-Gm-edit icon-color" v-if=" !item.flag " @click.stop.prevent="editNode(index)"></span>
                            <span class="icon-Gm-confirm icon-color" v-if=" item.flag " @click.stop.prevent="saveNode(index)"></span>
                            <span class="icon-Gm-cancel icon-color" v-if=" item.flag " @click.stop.prevent="cancelNode(index)"></span>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="dy-fx-1 border-r" :class="{'dy-fx-3': nodeFlag}" style="height: 600px;overflow:hidden;overflow-y:scroll;">
                <div class="approve-person"></div>
            </div>

            <div class="dy-fx-1 border-r relative" :class="{'dy-fx-2': nodeFlag}" v-if="nodeFlag" style="height: 600px;">
                <div style="overflow:hidden;overflow-y:scroll;height:555px;line-height:30px;">
                    <div class="dy-flex border-b">
                        <div class="dy-fx-1 border-r">序号</div>
                        <div class="dy-fx-3">项目名称</div>
                    </div>
                    <div class="dy-flex border-b" v-for="(item, index) in queryProjects">
                        <div class="dy-fx-1 border-r">{{ index+1 }}</div>
                        <div class="dy-fx-3">{{ item.projectName }}</div>
                    </div>
                </div>
                <div class="absolute-project cursor" @click="tenantProject">管理项目</div>
            </div>

            <div class="dy-fx-1" :class="{'dy-fx-3': nodeFlag}" style="height: 600px;overflow:hidden;overflow-y:scroll;">
                <div style="padding: 50px 0;">
                    <div class="relative">
                        <div class="top-bottom-sketch-map">开始</div>
                        <div class="content-sketch-map" v-for="(item, index) in showNode" style="position: relative;overflow: hidden;">
                            <div class="map-radius">{{ index+1 }}</div>
                            <div class="map-name">{{ item.name }}</div>
                            <div><span v-for="(item0, index0) in item.user">{{ item0.name }}<span v-if="index0 < item.user.length-1">/</span></span>
                            </div>
                            <div class="sectionIcon" :style="showNode[index].signType == 'Y'?'background:#f4ae47':'background:#5e67a5'">{{showNode[index].signType == 'Y'?'会签':'串签'}}</div>
                        </div>
                        <div class="top-bottom-sketch-map">结束</div>
                        <div class="border-r map-border"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- //授权项目 -->
    <div class="mark-auth-project" v-if="tenantProjectFlag">
        <div class="auth-project">
            <div class="text-center font-16 line-height-45">授权项目</div>
            <div class="close absolute auto-close" @click="tenantProjectFlag = !tenantProjectFlag">x</div>
            <div class="clearfix pl-24 pr-24 pb-20" style="background-color: #f7f7f7;">

                <div class="pull-left" style="width: 600px;">
                    <p class="line-height-34">成员列表</p>
                    <div class="box-i-shadow br-4 border bg-fff text-center line-height-40">
                        <div style="height:400px;overflow-y: scroll;">
                            <div class="dy-flex">
                                <div class="dy-fx-1 cz-center">
                                    <div class="check-auth cursor" :class="{'check-auth-active': allcheckProjectflag}" @click="allcheckProject"></div>
                                </div>
                                <div class="dy-fx-2">大区</div>
                                <div class="dy-fx-2">公司</div>
                                <div class="dy-fx-3">项目</div>
                            </div>
                            <div class="dy-flex border-t" v-for="(item, index) in tenantProjectData">
                                <div class="dy-fx-1 cz-center">
                                    <div class="check-auth cursor" :class="{'check-auth-active': item.flag}" @click="singleCheck(index)"></div>
                                </div>
                                <div class="dy-fx-2">{{ item.areaName }}</div>
                                <div class="dy-fx-2">{{ item.companyName }}</div>
                                <div class="dy-fx-3 ellipsis-1">{{ item.projectName }}</div>
                            </div>
                        </div>
                    </div>
                    <p class="line-height-34">共{{tenantProjectData.length}}条记录</p>
                </div>
                <div class="pull-right" style="width:224px;">
                    <p class="line-height-34">成员列表</p>
                    <div class="box-i-shadow br-4 border bg-fff text-center line-height-40">
                        <div style="height:400px;overflow-y: scroll;">
                            <div class="dy-flex">
                                <div class="dy-fx-1 cz-center">序</div>
                                <div class="dy-fx-3">项目</div>
                                <div class="dy-fx-1">操作</div>
                            </div>
                            <div class="dy-flex border-t" v-for="(item, index) in partProject">
                                <div class="dy-fx-1 cz-center">{{ index+1 }}</div>
                                <div class="dy-fx-3 ellipsis-1">{{ item.projectName }}</div>
                                <div class="dy-fx-1">
                                    <span class="icon-Gm-delete" @click="delCheck(index)"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="line-height-34">共{{ partProject.length }}条记录</p>
                </div>

            </div>
            <div class="ptb-10 text-center">
                <button type="button" class="btn n-btn-primary mr-5" @click="queryProject">确定添加</button>
                <button type="button" class="btn n-btn-outline" style="min-width:110px;" @click="tenantProjectFlag = !tenantProjectFlag">取消</button>
            </div>
        </div>
    </div>
</section>

<script src="modules/flow/scripts/approve.js" charset="utf-8"></script>
<script src="modules/flow/scripts/assgness_create.js" charset="utf-8"></script>

<style media="screen">
    .sectionIcon{
        position: absolute;
        right: -20px;
        top: 6px;
        width: 80px;
        line-height: 28px;
        text-align: center;
        transform:rotate(45deg);
        color: #fff;
    }
    .absolute-project {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 45px;
        line-height: 45px;
        background: rgba(86, 94, 153, 1);
        box-shadow: 0px -2px 4px 0px rgba(177, 177, 177, 0.5);
        color: #fff;
        width: 100%;
    }

    .top-bottom-sketch-map {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #D5D9F5;
        margin: 0 auto;
        border-radius: 50%;
        position: relative;
        background: #fff;
        z-index: 1;
    }

    .content-sketch-map {
        width: 80%;
        min-height: 150px;
        border-radius: 8px;
        border: 2px solid #D5D9F5;
        margin: 30px auto;
        position: relative;
        background: #fff;
        z-index: 1;
    }

    .content-sketch-map::before {
        content: '';
        background: url(assets/images/dwon1.png) center center no-repeat;
        width: 16px;
        height: 16px;
        position: absolute;
        left: 50%;
        top: -8px;
        background-size: contain;
        transform: translate(-50%, 0);
    }

    .content-sketch-map::after {
        content: '';
        background: url(assets/images/dwon1.png) center center no-repeat;
        width: 16px;
        height: 16px;
        position: absolute;
        left: 50%;
        bottom: -8px;
        background-size: contain;
        transform: translate(-50%, 0);
    }

    .map-radius {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        margin: 25px auto 10px;
        background: rgba(94, 103, 165, 1);
        box-shadow: 0px 0px 6px 0px rgba(138, 149, 221, 1);
        position: relative;
    }

    .map-radius::before {
        content: '';
        position: absolute;
        left: -5px;
        top: -5px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid rgba(94, 103, 165, 1);
    }

    .map-border {
        position: absolute;
        left: 50%;
        top: 0;
        height: 100%;
        transform: translate(-50%, 0);
    }
    /* //审批节点 */

    .approve-person .approve-top {
        height: 50px;
        width: 100%;
        background: rgba(241, 241, 241, 1);
        display: flex;
    }

    .approve-person .approve-top .approve-tab {
        flex: 1;
        position: relative;
        line-height: 50px;
    }

    .approve-tab-active {
        color: #565E99;
    }

    .approve-tab-active:before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 60px;
        height: 2px;
        background: rgba(86, 94, 153, 1);
    }

    .approve-node {
        text-align: left;
        padding-left: 15px;
    }

    .node-children-name {
        line-height: 40px;
        height: 40px;
        padding-left: 5px;
    }

    .user-select {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-top: 12px;
        border-radius: 4px;
        border: 1px solid #ddd;
        display: inline-block;
        vertical-align: top;
    }

    .user-select-active {
        background-image: url(assets/images/Check.png);
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #5e67a5;
        border-color: #5e67a5;
    }

    .check-auth {
        width: 13px;
        height: 13px;
        position: relative;
        border: 1px solid #666;
        border-radius: 4px;
    }

    .check-auth-active {
        background-image: url(assets/images/Check.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 8px;
        background-color: #5e67a5;
        width: 13px;
        height: 13px;
        border: 1px solid #5e67a5;
        border-radius: 4px;
    }

    .auto-close {
        right: 0;
        top: 0;
        width: 45px;
        height: 45px;
        line-height: 45px;
        text-align: center;
    }

    .auth-project {
        width: 900px;
        background: #fff;
        border-radius: 6px;
        position: relative;
    }

    .cz-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mark-auth-project {
        background: rgba(0, 0, 0, .5);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
